<template>
  <mt-tabbar v-model="selectedTab" class="footer" fixed>
    <mt-tab-item @click.native="click(item)" v-for="item in tabs" :key="item.code" :id="item">

      <i slot="icon" :class="item.icon" aria-hidden="true"></i>
      {{item.name}}</mt-tab-item>
  </mt-tabbar>
</template>

<script>
export default {
  name: "commonFooter",
  data() {
    return {
      selectedTab: {}
    };
  },
  props: ["tabs"],
  created: function() {
    let { tabs = [] } = this;
    const path = this.$route.path;

    tabs.forEach(item => {
      const icon = item.icon;
      item.icon = icon ? `fa fa-${icon} fa-lg` : "";

      path.indexOf(item.path) > -1 && (this.selectedTab = item);
    });
    this.tabs = tabs;
  },
  watch: {
    $route: function(current) {
      this.tabs.forEach(item => {
        item.path === current.name && (this.selectedTab = item);
      });
    }
  },
  methods: {
    click: function(tab) {
      const lang = localStorage.language || "cn";
      const path = tab.path;

      path &&
        this.$router.push({
          path: `/${lang}/system/${path}`
        });
    }
  }
};
//fa fa-envelope-o fa-lg
</script>

<style lang="scss" scoped>
</style>

